<template>
  <div>
    <video  id="video"/>
  </div>
</template>
<script>
  import QRCode from 'qrcodejs2'
  export default{
    data () {
      return {
        counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
        num : 15,  // 一次显示多少条
        pageStart : 0, // 开始页数
        pageEnd : 0, // 结束页数
        listdata: [], // 下拉更新数据存放数组
        downdata: [],  // 上拉更多的数据存放数组
        page:1,
        size:10,
        totalPages:1,
        paymentData:[],
        textData:{
          id:1,
          name:'zzh',
          arge:'25',
        }
      }
    },
    mounted(){
      this.qrcode()
    },
    methods: {
      qrcode () {
        var flag = true;
        window.addEventListener("DOMContentLoaded", function () {
          var video = document.getElementById("video"), canvas, context;
          try {
            canvas = document.createElement("canvas");
            canvas.width = 640;
            canvas.height = 480;
            context = canvas.getContext("2d");
          } catch (e) { alert("not support canvas!"); return; }
          navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

          if (navigator.getUserMedia)
            navigator.getUserMedia(
              { "video": true },
              function (stream) {
                if (video.mozSrcObject !== undefined)video.mozSrcObject = stream;
                else video.src = ((window.URL || window.webkitURL || window.mozURL || window.msURL) && window.URL.createObjectURL(stream)) || stream;
                video.play();
              },
              function (error) {
                alert("请检查是否存在或者开启摄像头");
                flag = false;
              }
            );
          else alert("Native device media streaming (getUserMedia) not supported in this browser");

          setInterval(function () {
            if(!flag){
              return;
            }
            context.drawImage(video, 0, 0, canvas.width = video.videoWidth, canvas.height = video.videoHeight);
            var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
/*            $.ajax({
              url : 'qRCodeAction_decoderQRCode.action',
              async : false,
              type : 'post',
              data : {
                'time' : (new Date()).toString(),
                'img' : image
              },
              success : function(message) {
                if(message!=null){
                  flag=false;
                  window.location.href='qRCodeActionshow.action?message='+message;
                }
              },
            });*/
          }, 5000);
        }, false);
      }
    },
  }
</script>
<style scoped lang="less">
  #qrcode{
    width:160px;
    height:160px;
    margin-top:15px;
  }

  #video {
    height: 400px;
    width: 400px;
    display: block;
    margin: 0;
    padding: 0;
  }
  #canvas {
    height: 400px;
    width: 800px;
    display: block;
    margin: 0;
    padding: 0;
  }
</style>
